HTML5 is all the rage with the cool kids, and although there’s a lot of focus on the new language, there’s plenty for web app developers with new JavaScript APIs both in the HTML5 spec and separated out as their own W3C specifications. This session will take you through demos and code and show off some of the outright crazy bleeding edge demos that are being produced today using the new JavaScript APIs. But it’s not all pie in the sky – plenty is useful today, some even in Internet Explorer!

1. Browsers
with
Wings:
HTML5
& APIs

6. HTML5 brand

9. HTML5 is:
markup,
JavaScript, CSS,
SVG, jQuery &
your dinner.

10. HTML5 is:
markup, Lie.
Don'CSS,
JavaScript, t be
stoop
id
SVG, jQuery & ,
but...
your dinner.

11. HTML5 is
anything & everything
to mere mortal beings.

12. Today

13. Media

14. <video src=bruce.mp4>

16. <video src=bruce.mp4>
<a href="bruce.mp4">Download</a>
</video>

17. Codec Wars

18. <video>
<source src=bruce.mp4>
<source src=bruce.ogv>
</video>

19. <video>
<source src=bruce.webm>
<source src=bruce.mp4>
<source src=bruce.ogv>
</video>

20. <video controls>
<source src=bruce.mp4>
<source src=bruce.ogv>
</video>

28. <video>
works i n IE6

29. <video>
wo L n .IE6
rks iie

30. http://camendesign.com/code/video_for_everybody
<video width="640" height="360" controls preload="none">
<!-- MP4 must be first for iPad! -->
<source src="__VIDEO__.MP4" type="video/mp4" /><!-- WebKit video -->
<source src="__VIDEO__.OGV" type="video/ogg" /><!-- Firefox / Opera -->
<!-- fallback to Flash: -->
<object width="640" height="384" type="application/x-shockwave-flash"
data="__FLASH__.SWF">
<!-- Firefox uses the `data` attribute above, IE/Safari uses the param below -->
<param name="movie" value="__FLASH__.SWF" />
<param name="flashvars" value="image=__POSTER__.JPG&amp;file=__VIDEO__.MP4" />
<!-- fallback image. note the title field below, put the title of the video there -->
<img src="__VIDEO__.JPG" width="640" height="360" alt="__TITLE__"
title="No video playback capabilities, please download the video below" />
</object>
</video>
<!-- you *must* offer a download link as they may be able to play the file locally.
customise this bit all you want -->
<p> <strong>Download Video:</strong>
Closed Format: <a href="__VIDEO__.MP4">"MP4"</a>
Open Format: <a href="__VIDEO__.OGV">"OGG"</a>
</p>

31. Custom player style

32. function toggle() {
if (video.paused) {
video.play();
this.innerHTML = 'Pause';
} else {
video.pause();
this.innerHTML = 'Play';
}
}
var play = document.getElementById('play');
play.onclick = toggle;

33. function toggle() {
if (video.paused) {
video.play();
this.innerHTML = 'Pause';
} else {
video.pause();
this.innerHTML = 'Play';
}
}
var play = document.getElementById('play');
play.onclick = toggle;

34. function toggle() {
if (video.paused) {
video.play();
this.innerHTML = 'Pause';
} else {
video.pause();
this.innerHTML = 'Play';
}
}
var play = document.getElementById('play');
play.onclick = toggle;

35. function toggle() {
if (video.paused) {
video.play();
this.innerHTML = 'Pause';
} else {
video.pause();
this.innerHTML = 'Play';
}
}
var play = document.getElementById('play');
play.onclick = toggle;

36. // get & set
video.currentTime
// half speed
video.playbackRate = 0.5
// actual loaded video
video.currentSrc
// etc

37. video.ontimeupdate = function () {
updatePlayhead(this.currentTime);
};

38. Fullscreen?

39. Warning! User agents should not provide a public API to cause
videos to be shown full-screen. A script, combined with a carefully
crafted video file, could trick the user into thinking a system-modal
dialog had been shown, and prompt the user for a password. There is
also the danger of "mere" annoyance, with pages launching full-
screen videos when links are clicked or pages navigated. Instead,
user-agent specific interface features may be provided to easily allow
the user to obtain a full-screen playback mode.

42. Canvas
Cooler than a fake Han Solo.

43. First consider SVG:
Standard
Vertical
Graphing

44. First consider SVG:
Standard
Vertical
Lie.
Graphing

45. First consider SVG:
Standard a lie.
Not
Vertical
Lie.
Graphing

46. SVG: Vector based, good for simple
and interactive
Canvas: Pixel based, good for pixel
manipulation & high animation
Check out raphaeljs.com

48. Mix & match
to the
technology's
strength

49. pixel
pushing

50. http://mugtug.com/darkroom

51. var ctx = canvas.getContext('2d');
ctx.getImageData(0,0,w,h)

52. ctx.getImageData(0, 0, w, h);
0 1 2 3
i = 0 r g b a
i = 1 r g b a
i... r g b a

53. pixels.data[i * 4 + 0];
0 1 2 3
i = 0 r g b a
i = 1 r g b a
i... r g b a

54. pixels.data[i * 4 + 1];
0 1 2 3
i = 0 r g b a
i = 1 r g b a
i... r g b a

55. pixels.data[i * 4 + 2];
0 1 2 3
i = 0 r g b a
i = 1 r g b a
i... r g b a

56. pixels.data[i * 4 + 3];
0 1 2 3
i = 0 r g b a
i = 1 r g b a
i... r g b a

57. var px = ctx.getImageData(0, 0, w, h),
l = px.data.length,
i;
for (i = 0; i < l; i += 4) {
}

58. var px = ctx.getImageData(0, 0, w, h),
l = px.data.length,
i;
for (i = 0; i < l; i += 4) {
This says loop
over each pixel
}

59. var px = ctx.getImageData(0, 0, w, h),
l = px.data.length,
i;
for (i = 0; i < l; i += 4) {
px.data[i+0] = 255 - px.data[i+0];
}

60. var px = ctx.getImageData(0, 0, w, h),
l = px.data.length,
i;
for (i = 0; i < l; i += 4) {
px.data[i+0] = 255 - px.data[i+0];
px.data[i+1] = 255 - px.data[i+1];
}

61. var px = ctx.getImageData(0, 0, w, h),
l = px.data.length,
i;
for (i = 0; i < l; i += 4) {
px.data[i+0] = 255 - px.data[i+0];
px.data[i+1] = 255 - px.data[i+1];
px.data[i+2] = 255 - px.data[i+2];
}

62. var px = ctx.getImageData(0, 0, w, h),
l = px.data.length,
i;
for (i = 0; i < l; i += 4) {
px.data[i+0] = 255 - px.data[i+0];
px.data[i+1] = 255 - px.data[i+1];
px.data[i+2] = 255 - px.data[i+2];
// don't need to do the alphachannel
}

63. var px = ctx.getImageData(0, 0, w, h),
l = px.data.length,
i;
for (i = 0; i < l; i += 4) {
px.data[i+0] = 255 - px.data[i+0];
px.data[i+1] = 255 - px.data[i+1];
px.data[i+2] = 255 - px.data[i+2];
// don't need to do the alphachannel
}
ctx.putImageData(px, 0, 0);

66. You can do
that in SVG,
but you can't
do this:

67. http://mrdoob.com

68. canvas.toDataURL()

69. canvas.toDataURL()

70. data:image/
png;base64,iVBORw0KGgoAA
AGQCAYAAACAvzbMAAAgAElEQ
f2e692YghpAYQuYQQaP9U8Ur
Q4gSwXNbREIaqVKlpVFPq6G0
VIhMZJDc3OEM/
99v7b3P2efcfc49e5+9z9nDd
+67PWWd
+95liOD8IBAiAAAiAAAjYJxG
GAgCAjgAAIgAAIOCIAAXGEDY
ACIAACjghAQBxhgyMQAAEQAA
IQEEfY4AgEQAAEQAACgjwAAi
IBEAABEICAIA
+AAAiAAAg4IgABcYQNjkAABE
KOCEBAHGGDIxAAARAAAQgI8g

71. Shims
1. Silverlight
Bridge
2. excanvas.js

72. Storage

73. Cookies
suck.
(for most situations)

74. The code for
cookies is
painful: so
we google it.

75. "Session"
cookies
leak across
"sessions".

76. Non-session
cookies require
"special"
date format

77. Deleting
cookies,
doesn't delete,
but sets it
in the past.

78. Fuck cookies.

79. Sexy Web Storage FTW

80. Key/value pair

81. One API
setItem(key, value)

82. One API
setItem(key, value)
string* getItem(key)

83. One API
setItem(key, value)
string* getItem(key)
removeItem(key)

84. One API
setItem(key, value)
string* getItem(key)
removeItem(key)
string key(index)

85. One API
setItem(key, value)
string* getItem(key)
removeItem(key)
string key(index)
clear()

86. One API
setItem(key, value)
string* getItem(key)
removeItem(key)
string key(index)
clear()
.length

87. Two instances
localStorage
sessionStorage

88. localStorage
• Persists
• Applied to document origin, i.e.
scheme/host/port tuple
• No expiry

89. sessionStorage
• Lasts whilst on the document origin
• Doesn't leak
• Exactly the same API as localStorage

90. var ss = sessionStorage;
ss.setItem('version', 12);
ss.getItem('version');

91. rnin g!
Wa
Values are strings

92. rnin g!
Wa
Values are strings
Work around: JSON
(and http://www.json.org/json2.js)

93. var ss = sessionStorage,
user = { screen_name : ‘rem’,
rating : 11 };
ss.setItem(‘user’, JSON.stringify(user));
var obj = JSON.parse(ss.getItem(‘user’));
alert(obj.screen_name);

97. window.name shim
http://gist.github.com/350433

98. Alternatives

99. Web SQL Database

100. IndexedDB

101. Geolocation

103. navigator.geolocation

104. getCurrentPosition
watchPosition
clearPosition

105. var geo = navigator.geolocation;
geo.getCurrentPosition(function(data){
map(data.coords.latitude,
data.coords.longitude);
});

106. var geo = navigator.geolocation;
geo.getCurrentPosition(function(data){
map(data.coords.latitude,
data.coords.longitude);
});

107. var geo = navigator.geolocation;
geo.getCurrentPosition(function(data){
map(data.coords.latitude,
data.coords.longitude);
});

108. var geo = navigator.geolocation;
geo.getCurrentPosition(function(data){
map(data.coords.latitude,
data.coords.longitude);
});

109. var geo = navigator.geolocation;
geo.getCurrentPosition(function(data){
map(data.coords.latitude,
data.coords.longitude);
});

111. Check your accuracy

112. http://j.mp/geoshim
if (!navigator.geolocation) {
navigator.geolocation = (function (window) {
function getCurrentPosition(callback) {
// source: http://www.maxmind.com/app/javascript_city
var geourl = 'http://j.maxmind.com/app/geoip.js_' + Math.random(),
iframe = document.createElement('iframe'),
doc, win;
iframe.style.display = 'none';
window.document.body.appendChild(iframe);
doc = iframe.contentDocument || iframe.contentWindow.document;
win = iframe.contentWindow;
// once the script has loaded, it triggers an onload event
iframe.onload = function () {
// assign all the captured values across to our geo object
var geo = {
coords: {
latitude: win.geoip_latitude(),
longitude: win.geoip_longitude()
// other values are supported, i.e. accuracy, speed, heading, etc
},
timestamp: (new Date()).getTime()

113. Sockets

114. Move
over
comet.

115. Low latency.
Direct connection.
Simple API.

116. var url = 'ws://apps.leftlogic.com:8000/',
conn = new WebSocket(url);
conn.onmessage = function (event) {
console.log(JSON.parse(event.data));
};
conn.send('hello world');

117. var url = 'ws://apps.leftlogic.com:8000/',
conn = new WebSocket(url);
conn.onmessage = function (event) {
console.log(JSON.parse(event.data));
};
conn.send('hello world');

118. var url = 'ws://apps.leftlogic.com:8000/',
conn = new WebSocket(url);
conn.onmessage = function (event) {
console.log(JSON.parse(event.data));
};
conn.send('hello world');

119. var url = 'ws://apps.leftlogic.com:8000/',
conn = new WebSocket(url);
conn.onmessage = function (event) {
console.log(JSON.parse(event.data));
};
conn.send('hello world');

120. var url = 'ws://apps.leftlogic.com:8000/',
conn = new WebSocket(url);
conn.onmessage = function (event) {
console.log(JSON.parse(event.data));
};
conn.send('hello world');

121. var url = 'ws://apps.leftlogic.com:8000/',
conn = new WebSocket(url);
conn.onmessage = function (event) {
console.log(JSON.parse(event.data));
};
conn.send('hello world');

122. http://rem.im/collab-drawing

123. http://rem.im/collab-drawing

124. http://rem.im/collab-drawing

125. http://github.com/gimite/web-socket-js/

126. Partial

127. Offline

128. Using a Manifest
<!DOCTYPE html>
<html manifest="my.manifest">
<body>
<!-- my page -->
</body>
</html>

129. my.manifest
CACHE MANIFEST
app.html
css/style.css
js/app.js
#version 13

130. The Manifest
1. Serve as text/manifest, by
adding to mime.types:
text/cache-manifest manifest

131. t ip Firefox caching
<IfModule mod_expires.c>
ExpiresActive on
ExpiresByType text/cache-manifest
↪ “access plus 0 seconds”
</IfModule>

132. The Manifest
2. First line must be:
CACHE MANIFEST

133. The Manifest
3. Including page is implicitly
included in the cache.

134. The Manifest
4. Include some versioning to
cache bust your manifest
# version 16

135. The Manifest
5. Two futher namespaces:
NETWORK & FALLBACK
FALLBACK:
/ offline.html

136. CACHE MANIFEST
CACHE:
app.js
app.css
index.html
NETWORK:
/live/*
FALLBACK:
* offline.html

137. CACHE MANIFEST
CACHE:
app.js
Served from cache app.css
index.html
NETWORK:
/live/*
FALLBACK:
* offline.html

138. CACHE MANIFEST
CACHE:
app.js
app.css
index.html
Requests to
http://mysite.com/live/x NETWORK:
/live/*
must go via the web
FALLBACK:
* offline.html

139. CACHE MANIFEST
CACHE:
app.js
app.css
Requests for files not
index.html
found in the cache,
NETWORK:
are directed to /live/*
offline.html (when
FALLBACK:
offline). / offline.html

140. Browser: I have a
Browser: request Server: serve all manifest, cache
assets
Browser:
Server: serve
applicationCache Browser: reload
manifest assets
updated
Browser: only
Browser: serve Server: 304 Not
request manifest
locally Modified
file

141. Browser: I have a
Browser: request Server: serve all manifest, cache
assets
Browser:
Server: serve
applicationCache Browser: reload
manifest assets
updated
Browser: only
Browser: serve Server: 304 Not
request manifest
locally Modified
file

142. Browser: I have a
Browser: request Server: serve all manifest, cache
assets
Browser:
Server: serve
applicationCache Browser: reload
manifest assets
updated
Browser: only
Browser: serve Server: 304 Not
request manifest
locally Modified
file

143. Browser: I have a
Browser: request Server: serve all manifest, cache
assets
Browser:
Server: serve
applicationCache Browser: reload
manifest assets
updated
Browser: only
Browser: serve Server: 304 Not
request manifest
locally Modified
file

144. Browser: I have a
Browser: request Server: serve all manifest, cache
assets
Browser:
Server: serve
applicationCache Browser: reload
manifest assets
updated
Browser: only
Browser: serve Server: 304 Not
request manifest
locally Modified
file

145. Browser: I have a
Browser: request Server: serve all manifest, cache
assets
Browser:
Server: serve
applicationCache Browser: reload
manifest assets
updated
Browser: only
Browser: serve Server: 304 Not
request manifest
locally Modified
file

146. Browser: I have a
Browser: request Server: serve all manifest, cache
assets
Browser:
Server: serve
applicationCache Browser: reload
manifest assets
updated
Browser: only
Browser: serve Server: 304 Not
request manifest
locally Modified
file

147. Browser: I have a
Browser: request Server: serve all manifest, cache
assets
Browser:
Server: serve
applicationCache Browser: reload
manifest assets
updated
Browser: only
Browser: serve Server: 304 Not
request manifest
locally Modified
file

148. Browser: I have a
Browser: request Server: serve all manifest, cache
assets
Browser:
Server: serve
applicationCache Browser: reload
manifest assets
updated
Browser: only
Browser: serve Server: 304 Not
request manifest
locally Modified
file

149. File API

150. files[0].getAsDataURL()

151. files[0].getAsDataURL()

153. Link prefetching
Web Workers
Web Forms
Hash change event, history state management
Contenteditable
Native drag and drop - embedding of data
Microdata
Cross server messaging
embedded attribute data
mime-type registration
DXHTML6

154. Link prefetching
Web Workers
Web Forms
Hash change event, history state management
Contenteditable
Native drag and drop - embedding of data
Microdata
Cross server messaging
embedded attribute data
mime-type registration Lie.
DXHTML6

155. "Should I be
using HTML5
today?"

156. 1. doctype, script & styles only

157. 1. doctype, script & styles only
2. New HTML5 elements

158. 1. doctype, script & styles only
2. New HTML5 elements
3. Existing APIs

159. 1. doctype, script & styles only
2. New HTML5 elements
3. Existing APIs
4. Shims

160. Yes.

161. introducinghtml5.com
Yes.
@rem
remy@leftlogic.com